<!--
 * @Author: wuzhen
 * @Date: 2019-12-04 17:56:54
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-16 16:34:32
 * @Description: 用户管理
 -->
<template>
  <Card style="width:100%" dis-hover>
    <!-- 搜索表头/表头按钮 -->
    <search-table
      :search-props="searchProps"
      @handle-filter="handleFilter"
      :label-width="100"
    >
      <template v-slot:FormItem>
        <FormItem :label-width="0">
          <Input
            :type="type !== 'username' ? 'number' : 'text'"
            v-model="keyword"
            clearable
          >
            <Select v-model="type" slot="prepend" style="width:90px">
              <Option value="mobile">手机号</Option>
              <Option value="username">用户昵称</Option>
              <Option value="userid">用户ID</Option>
            </Select>
          </Input>
        </FormItem>
      </template>
    </search-table>
    <wz-table
      ref="table"
      :search-api="searchApi"
      :columns="columns"
      :handle-btn="handleBtn"
    >
      <template v-slot:action="slotProps">
        <Dropdown
          placement="bottom-start"
          @on-click="e => handleClick(e, slotProps.row)"
        >
          <a href="javascript:void(0)">
            操作
            <Icon type="md-more" />
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="detail">查看用户</DropdownItem>
            <DropdownItem name="on">{{
              slotProps.row.status === 10 ? "帐户停用" : "帐户启用"
            }}</DropdownItem>
            <!-- <DropdownItem name="offline" :disabled="slotProps.row.onlinestatus === 10">强制下线</DropdownItem> -->
            <DropdownItem name="friends">好友管理</DropdownItem>
            <DropdownItem name="resetPws">重置密码</DropdownItem>
            <DropdownItem name="destroy">注销账号</DropdownItem>

            <!-- <DropdownItem name="offline">修改</DropdownItem> -->
          </DropdownMenu>
        </Dropdown>
      </template>
    </wz-table>
    <!-- 被举报 -->
    <Modal v-model="showReport" footer-hide width="650">
      <div slot="header">
        <span style="color:#3399ff;margin-right:10px;">被举报次数：2次</span>
        <span style="color:#ff8d1a">共2人举报该用户</span>
      </div>
      <Table :columns="columnsReport" :data="dataReport"></Table>
      <div style="margin-top:20px;text-align:right" v-if="dataReportTotal">
        <Page
          :current="reportPage"
          :page-size="reportSize"
          @on-page-size-change="changeReportSize"
          :total="dataReportTotal"
          @on-change="changeReportPage"
          show-total
          show-sizer
        />
      </div>
    </Modal>
    <!-- 查看详情 -->
    <Drawer title="用户详情" v-model="showDetails" width="700">
      <wz-details ref="details" @on-report="showReport = true" />
    </Drawer>
    <Modal title="图片预览" v-model="showImg" footer-hide>
      <img
        src="https://res.squrab.com/0e55f7842ae529a8e744bd075583035b.jpg"
        v-if="showImg"
        style="width: 100%"
      />
    </Modal>
  </Card>
</template>
<script>
import index from "./mixins";
import {
  getUserList,
  updateStatus,
  updateOnlinestatus,
  resetUserPwd,
  destroyAccount
} from "@/request/api";
import wzDetails from "./details";
export default {
  mixins: [index],
  components: {
    wzDetails
  },
  data() {
    return {
      searchApi: getUserList,
      apiParams: {
        flipper: {
          offset: 0,
          limit: 15,
          sort: "createtime desc"
        }
      },
      showDetails: false,
      showReport: false,
      columnsReport: [
        {
          title: "举报原因",
          render: (h, params) => {
            const row = params.row;
            console.log(row);
            return h("span", "骚扰");
          }
        },
        {
          title: "举报时间",
          width: 170,
          render: (h, params) => {
            const row = params.row;
            console.log(row);
            return h("span", "2019-11-12 11:15:20");
          }
        },
        {
          title: "举报人",
          render: (h, params) => {
            const row = params.row;
            console.log(row);
            return h("div", [h("p", "吴振"), h("p", "15620231347")]);
          }
        },
        {
          title: "图片",
          render: (h, params) => {
            const row = params.row;
            console.log(row);
            return h(
              "span",
              {
                class: {
                  primary: true
                },
                on: {
                  click: () => {
                    this.showImg = true;
                  }
                }
              },
              "查看"
            );
          }
        }
      ],
      dataReport: [{}, {}],
      reportPage: 1,
      reportSize: 10,
      dataReportTotal: 15,
      showImg: false,
      type: "mobile",
      keyword: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取table数据
    getData() {
      this.$refs.table.getData(this.apiParams);
    },
    // 搜索
    handleFilter(params) {
      let apiParams = {};
      if (params.date && params.date.length && params.date[0]) {
        apiParams["createtime"] = {
          min: new Date(params.date[0] + " 00:00:00").getTime(),
          max: new Date(params.date[1] + " 23:59:59").getTime()
        };
      }
      apiParams = { ...apiParams, ...params };
      this.apiParams["bean"] = { ...apiParams };
      if (this.keyword.trim()) {
        if (this.type === "userid") {
          this.apiParams["bean"][this.type] = [this.keyword];
        } else {
          this.apiParams["bean"][this.type] = this.keyword;
        }
      }
      this.apiParams["flipper"] = {
        offset: 0,
        limit: 15,
        sort: "createtime desc"
      };
      this.getData();
    },
    handleClick(type, row) {
      this.id = row.userid;
      switch (type) {
        case "detail": // 详情
          this.$refs["details"].getData(row.userid);
          this.showDetails = true;
          break;
        case "on": // 启用
          this.editStatus(row);
          break;
        case "offline": // 强制下线
          this.editOnlinestatus(row);
          break;
        case "friends": // 好友管理
          console.log(row);
          this.$router.push({
            path: `/userManagement/friends/${row.userid}`,
            query: {
              username: row.username
            }
          });
          break;
        case "resetPws": // 重置密码
          this.$Modal.warning({
            title: "友情提示",
            content: "确定要重置密码？",
            closable: true,
            onOk: () => {
              this.editOnResetPws(row);
            }
          });
          break;
          case "destroy": // 注销账号
          this.$Modal.warning({
            title: "友情提示",
            content: "确定要注销账号？",
            closable: true,
            onOk: () => {
              this.editOnDestroy(row);
            }
          });
          break;
        default:
          break;
      }
    },
    // 启用、停用
    async editStatus(row) {
      try {
        const res = await updateStatus({
          userid: row.userid,
          status: row.status === 10 ? 40 : 10
        });
        if (res.code === 200) {
          this.$Message.success("操作成功");
          if (row.status === 10) {
            row.status = 40;
          } else {
            row.status = 10;
          }
        }
      } catch (error) {
        throw error;
      }
    },
    // 强制下线
    async editOnlinestatus(row) {
      try {
        const res = await updateOnlinestatus({
          userid: row.userid
        });
        if (res.code === 200) {
          this.$Message.success("操作成功");
          row.onlinestatus = 10;
        }
      } catch (error) {
        throw error;
      }
    },
    // 重置密码
    async editOnResetPws(row){
      try{
        const res =await resetUserPwd({
           userid: row.userid
        })
        if (res.code === 200) {
          this.$Message.success("操作成功");
          row.onlinestatus = 10;
        }
      } catch (err){
        throw err
      }
    },
    // 注销账号
    async editOnDestroy(row){
       try{
        const res =await destroyAccount({
           userid: row.userid
        })
        if (res.code === 200) {
          this.$Message.success("操作成功");
          this.getData();
        }
      } catch (err){
        throw err
      }
    },
    changeReportSize() {},
    changeReportPage() {}
  }
};
</script>
